<template>
  <div class="sublist">
    <div class="top"  @click.stop="showList">
      <template v-if="subCuid">
        <span class="s1">{{subName}}</span>
        <span class="s1"><i class="icon" :class="'icon-' + subCoinType"></i>{{subCoinType.toUpperCase()}}<i class="iconfont icon-xiala" :class="{active:showSubAccountList}" /></span>
      </template>
      <template v-else>
        <span @click.stop="$router.push('/subaccount')" class="to-create">{{$t('subaccount.create')}}</span>
        <span class="logout" @click.stop="doLogout">{{$t('header.logout')}}</span>
      </template>
    </div>
    <transition name="fade">
      <div v-show="showSubAccountList" class="list">
        <div class="list-top">
          <div v-show="subAccountLoading" class="loading-box">
            <spinner color="#cccccc" class="loading"/>
          </div>
          <ul v-show="!subAccountLoading">
            <li v-for="(account_v,account_k) in list" :key="account_k">
              <dl>
                <dt class="name" :class="{active:account_v.puid === subCuid}">
                  <div class="d">{{account_v.name}}</div>
                </dt>
                <dd v-for="(coin_v,coin_k) in account_v.sub_config" :key="coin_k" class="coin-type" :class="{ active: account_v.puid === subCuid && coin_v.coin_type === subCoinType}" @click="changeSubAccount({ puid: account_v.puid, name: account_v.name, coin_type: coin_v.coin_type, address:coin_v.address, id: coin_v.id, balance_type: coin_v.balance_type })">
                  <div class="d clearfix">
                    <span class="fl"><i class="icon" :class="'icon-'+coin_v.coin_type"></i>{{coin_v.coin_type.toUpperCase()}}</span>
                    <span class="fr">{{coin_v.shares_15m}} {{coin_v.shares_15m_unit}}{{getCoinHashUnit(coin_v.coin_type)}}/s</span>
                  </div>
                </dd>
              </dl>
            </li>
            <li v-if="subAccount.length > listMathLength" class="more">
              <span @click.stop="more" class="more-link">{{$t('header.more')}}>></span>
            </li>
          </ul>
        </div>
        <div class="list-bottom">
          <router-link class="a" to="/subaccount">{{$t('header.control_subaccount')}}</router-link>
          <button class="a" @click="createSubaccount">{{$t('header.create_subaccount')}}</button>
          <!-- <router-link class="a" to="/subaccount?type=createsubaccount">{{$t('header.create_subaccount')}}</router-link> -->
          <button class="a" @click="doLogout">{{$t('header.logout')}}</button>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { accountList } from '@/api';
import { mapGetters, mapMutations, mapActions } from 'vuex';
import Spinner from '@/components/Spinner';

export default {
  components: {
    Spinner,
  },
  data() {
    return {
      subAccount: [], // 全部
      pageSize: 10,
      page: 1,
      subAccountLoading: false,
    };
  },
  computed: {
    ...mapGetters(['subName', 'subCuid', 'subCoinType', 'showSubAccountList']),
    listMathLength() {
      return this.pageSize * this.page;
    },
    list() {
      // 显示的
      return this.subAccount.slice(0, this.listMathLength);
    },
  },
  methods: {
    ...mapMutations(['SET_SUB_CUID', 'SET_SUB_NAME', 'SET_SUB_COIN_TYPE', 'SET_SHOW_SUBACCOUNTLIST', 'SET_SUB_ID', 'SET_SUB_ADDRESS', 'SET_SUB_BALANCE_TYPE']),
    ...mapActions(['Logout']),
    getCoinHashUnit(coinType) {
      return coinType === 'zec' ? 'Sol' : 'H';
    },
    createSubaccount() {
      this.$router.push(`/subaccount?type=createsubaccount&timestamp=${(new Date()).getTime()}`);
    },
    more() {
      this.page = this.page + 1;
    },
    showList() {
      this.SET_SHOW_SUBACCOUNTLIST(!this.showSubAccountList);
      this.getAccountList();
    },
    changeSubAccount(obj) {
      this.$router.push('/pools/dashboard');
      this.SET_SUB_CUID(obj.puid);
      this.SET_SUB_NAME(obj.name);
      this.SET_SUB_COIN_TYPE(obj.coin_type);
      this.SET_SUB_ID(obj.id);
      this.SET_SUB_ADDRESS(obj.address);
      this.SET_SUB_BALANCE_TYPE(obj.balance_type);
    },
    getAccountList() {
      this.subAccountLoading = true;
      this.page = 1;
      accountList().then((res) => {
        if (res.data.status === 1) {
          const data = res.data.data;
          if (data) {
            this.subAccount = res.data.data;
          }
        }
        this.subAccountLoading = false;
      }).catch(() => {
        this.$message.error(this.$t('error.catchError'));
        this.subAccountLoading = false;
      });
    },
    doLogout() {
      this.Logout().then(() => {
        window.location.href = '/';
      }).catch(() => {
        this.$message.error(this.$t('error.catchError'));
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.sublist{
  position: relative;
  .icon{
    display: inline-block;
    background-size: auto 100%;
    background-position: center;
    background-repeat:  no-repeat;
    @each $coinType in btc,bch,eth,dcr,etp,bsv,zec{
      &.icon-#{$coinType}{
        background-image: url(../../assets/images/home/icon-#{$coinType}.png);
      }
    }
  }
  .top{
    cursor: pointer;
    .to-create{
      margin-right: 20px;
      &:hover {
        color: #fff;
      }
    }
    .logout{
      &:hover {
        color: #fff;
      }
    }
    &:hover {
      .s1{
        color: #fff;
      }
    }
    .s1{
      &:first-of-type{
        margin-right: 20px;
      }
      .icon-xiala {
        display: inline-block;
        transition: all 0.2s;
        &.active {
          transform: rotate(180deg);
        }
      }
      .icon{
        vertical-align: top;
        margin-top: 14px;
        margin-right: 5px;
        width: 12px;
        height: 12px;
      }
    }
  }
  .list{
    width: 280px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50px;
    padding-bottom: 9px;
    background-color: #fff;
    border-radius: 3px;
    border: solid 1px #e4e7ed;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 3000;
    &.fade-enter-active,
    &.fade-leave-active {
      transition: all 0.2s;
    }
    &.fade-enter,
    &.fade-leave-to {
      opacity: 0;
      top: 40px;
    }
    &::before {
      content: " ";
      position: absolute;
      border-left: solid 1px #e4e7ed;
      border-top: solid 1px #e4e7ed;
      display: block;
      top: -4px;
      left: 50%;
      width: 7px;
      height: 7px;
      transform: translateX(-50%) rotate(45deg);
      background-color: #fff;
    }
    .list-top{
      font-size: 12px;
      color: #333333;
      max-height: 330px;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 4px;
      }
      &::-webkit-scrollbar-track {
        background: #ddd;
        border: thin solid lightgray;
        box-shadow: 0px 0px 2px #f6f6f6 inset;
      }
      &::-webkit-scrollbar-thumb {
        background: #247ba0;
        border-radius: 2px;
      }
      .loading-box{
        text-align: center;
      }
      .more{
        .more-link{
          cursor: pointer;
          display: block;
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #247ba0;
          text-align: right;
          padding-right: 10px;
        }
      }
      li{
        overflow: hidden;
        .coin-type:last-of-type{
          .d{
            border-bottom: 1px solid #f2f2f2;
          }
        }
        &:last-of-type{
          .coin-type:last-of-type{
            .d{
              border-bottom: none;
            }
          }
        }
        .name,.coin-type{
          padding: 0 20px;
          .d{
            position: relative;
            // border-bottom: 1px solid #f2f2f2;
            padding-right: 14px;
          }
        }
        .name{
          position: relative;
          padding-top: 12px;
          line-height: 26px;
          &.active::before{
            content: ' ';
            position: absolute;
            left: 10px;
            bottom: 11px;
            width: 4px;
            height: 4px;
            background-color: #70c1b3;
          }
        }
        .coin-type{
          line-height: 30px;
          cursor: pointer;
          .d{
            height: 30px;
            border-top: 1px solid #f2f2f2;
          }
          &:hover,&.active{
            background-color: #f2f2f2;
            border-bottom-color: transparent;
            color: #70c1b3;
            & + .coin-type{
              .d{
                border-top-color: transparent;
              }
            }
          }
          .icon{
            width: 14px;
            height: 14px;
            vertical-align: top;
            margin-top: 7px;
            margin-right: 12px;
          }
        }
      }
    }
    .list-bottom{
      border-top: 1px solid #f2f2f2;
      .a{
        display: block;
        width: 100%;
        border: none;
        outline: none;
        text-align: center;
        line-height: 30px;
        border-bottom: 1px solid #f2f2f2;
        font-size: 12px;
        color: #333333;
        &:hover{
          color: #70c1b3;
          background-color: #f2f2f2;
        }
      }
    }
  }
}
</style>
